<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" href="css/10.css">
    <link rel="stylesheet" href="css/layui-all/plugins/layui/css/layui.css">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="css/layui-all/plugins/layui/layui.js"></script>
    <script type="text/javascript">
        !function () {
            var htmlEl = document.getElementsByTagName('html')[0];
            var fitPage = function () {
                /* The calculate of with from zepto  */
                var w = htmlEl.getBoundingClientRect().width;
                w = Math.round(w);
                w = w > 750 ? 750 : w;
                var newW = w / 750 * 100;
                htmlEl.style.fontSize = newW + 'px';
            }
            fitPage();
            var t;
            var func = function () {
                clearTimeout(t);
                t = setTimeout(fitPage, 25);
            }
            window.addEventListener('resize', func);
        }();
    </script>
</head>
<body>
<header class="dc-header dc-header-fixed">

</header>
<section class="dc-content">
    <form class="layui-form" action="">
        <div class="dc-7-box">

            <div class="select-box">
                <div class="layui-form-item">
                    <label class="layui-form-label"
                           style="padding: 0;margin: 0;margin-top:0.19rem;width: 1.2rem;padding-right:0.25rem;border-right: 0.01rem solid #ccc;font-weight: 700;font-size: 0.3rem;color: #3D3D3D">单&nbsp;&nbsp;&nbsp;&nbsp;位</label>
                    <div class="layui-input-inline" style="margin: 0 0 0 1.9rem;margin-top: 0.14rem">
                        <input type="text" name="title" lay-verify="title" disabled autocomplete="off" placeholder="上海交通大学"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="select-box">
                <div class="layui-form-item">
                    <label class="layui-form-label"
                           style="padding: 0;margin: 0;margin-top:0.19rem;width: 1.2rem;padding-right:0.25rem;border-right: 0.01rem solid #ccc;font-weight: 700;font-size: 0.3rem;color: #3D3D3D">工&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    <div class="layui-input-inline" style="margin: 0 0 0 1.9rem;margin-top: 0.14rem">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="select-box">
                <div class="layui-form-item">
                    <label class="layui-form-label"
                           style="padding: 0;margin: 0;margin-top:0.19rem;width: 1.2rem;padding-right:0.25rem;border-right: 0.01rem solid #ccc;font-weight: 700;font-size: 0.3rem;color: #3D3D3D">手机号</label>
                    <div class="layui-input-inline" style="margin: 0 0 0 1.9rem;margin-top: 0.14rem">
                        <input type="text" name="phone" maxlength="11" lay-verify="title" autocomplete="off" placeholder="请输入"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="select-box">
                <div class="layui-form-item">
                    <label class="layui-form-label"
                           style="padding: 0;margin: 0;margin-top:0.19rem;width: 1.2rem;padding-right:0.25rem;border-right: 0.01rem solid #ccc;font-weight: 700;font-size: 0.3rem;color: #3D3D3D">验证码</label>
                    <div class="layui-input-inline" style="margin: 0 0 0 1.9rem;margin-top: 0.14rem">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入"
                               class="layui-input">
                    </div>
                    <input type="button" id="send-sms-code-btn" onclick="sendSMSCode()" class="code-show" style="background: #DCDEDD" value="获取验证码">
                </div>
            </div>
        </div>
        <!--style="background: #EE620B"-->
        <div class="dc-7-pay-btn" >确认绑定</div>
    </form>
</section>
<!--<div class="bottom-phone">咨询电话:56567788</div>-->
<script src="js/index.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
    });
    var wait = 0;
    function time( btn ) {
        if( wait == 0 ) {
            btn.removeAttr( "disabled" );
            btn.attr( "value", "获取验证码" );
            btn.css("background","#EE620B")
            wait = 60;
        }
        else {
            btn.attr( "disabled", true );
            btn.css("background","#DCDEDD")
            wait--;
            setTimeout( function() {
                time( btn );
            }, 1000 );
            $(".dc-7-pay-btn").css("background","#EE620B")
            btn.val(  wait + "s" );
        }
    }
    function sendSMSCode() {
        wait = 60;
        time($("#send-sms-code-btn"));
        //return hintMsg('验证码已经发送', true);


    }
    function func(){
        $(".layui-input").css("height","0.753rem")
        var phone=$("input[name=phone]").val()
        if(phone.length==11){
            $("#send-sms-code-btn").css("background","#EE620B")
        }
    }
    $(function(){
        setInterval(func, 50 )
    })
</script>
</body>
</html>